<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bizcharts 简单示例</title>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.2/react16.0.0.production.min.js"></script>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.2/react-dom16.0.0.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/javascript" src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.6/data-set.min.js"></script>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.5/BizCharts.min.js"> </script>
</head>

<body>
    <div id="mountNode">
        <!-- 骨架屏 -->
        <div>
            <div>
                <div style="position:relative;">
                    <canvas id="canvas_1" width="870" height="400" style="width: 870px; height: 400px;"></canvas>
                    <div class="g2-tooltip">
                        <div class="g2-tooltip-title"></div>
                        <ul class="g2-tooltip-list"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/babel">
        const { Chart, Axis, Geom, Tooltip, Legend } = window.BizCharts;
        // 数据源
        const data = [
        { genre: 'Sports', sold: 275, income: 2300 },
        { genre: 'Strategy', sold: 115, income: 667 },
        { genre: 'Action', sold: 120, income: 982 },
        { genre: 'Shooter', sold: 350, income: 5271 },
        { genre: 'Other', sold: 150, income: 3710 }
        ];
    
        // 定义度量
        const cols = {
            sold: { alias: '销售量' },
            genre: { alias: '游戏种类' }
        };
    
        // 渲染图表
        ReactDOM.render((
        <Chart width={600} height={400} data={data} scale={cols}>
            <Axis name="genre" />
            <Axis name="sold" />
            <Legend position="bottom" dy={-20} />
            <Tooltip />
            <Geom type="interval" position="genre*sold" color="genre" />
            <Geom type="point" position="genre*sold" color="genre" />
            <Geom type="line" position="genre*sold" />
        </Chart>
        ), document.getElementById('mountNode'));
    </script>
</body>

</html>